<template>
  <div>
    <MyContainer>
      <div class="steps">
        <el-steps :active="active" finish-status="success">
          <el-step title="下单"></el-step>
          <el-step title="支付"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div v-if="active===1">
        <h1>订单信息</h1>
        <p><b>订单编号：</b>{{order.orderNo}}</p>
        <el-table :data="order.orderItems">
          <el-table-column label="商品名" align="center" prop="name" />
          <el-table-column label="价格" align="center" prop="unitPrice" />
          <el-table-column label="数量" align="center" prop="num" />
        </el-table>
        <div>
          <span class="price">￥ {{ order.totalPrice }} 元</span>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </div>
      <div v-else-if="active===2" style="text-align:center;">
        <div>
          <img src="../../../assets/images/ewm.png" alt="">
        </div>
        <el-button type="primary" size="medium" @click="pay">确认支付</el-button>
      </div>
      <div v-else>
        <el-result icon="success" title="成功提示" subTitle="支付成功！可去个人中心查看订单">
          <template slot="extra">
            <el-button type="primary" size="medium" @click="$router.push('/fm/user')">去个人中心</el-button>
          </template>
        </el-result>
      </div>
    </MyContainer>
    <Footer/>
  </div>
</template>

<script>
import MyContainer from "@/components/Me/MyContainer";
import {mapGetters} from "vuex";
import Footer from "@/views/fm/components/Footer";
import {listProduct} from "@/api/system/product";
import {addOrders, getOrders, updateOrders} from "@/api/system/orders";

export default {
  name: 'ticket',
  dicts: ['print_method', 'face'],
  components: {Footer, MyContainer},
  data() {
    return {
      active: 1,
      order: {},
    }
  },
  computed: {
    ...mapGetters([
      "userId",
      "name",
    ]),
  },
  methods: {
    /** 查询商品信息列表 */
    getList() {
      getOrders(this.$route.query.id).then(response => {
        this.order = response.data;
      });
    },
    pay() {
      this.active = 3
      updateOrders({id:this.order.id, payStatus: 1}).then(response => {
        this.$modal.msgSuccess('支付成功')
      });
    },
    submit() {
      this.$confirm('此操作将提交订单并支付, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.active = 2;
      }).catch(() => {
        this.active = 1;
        this.$modal.msg('已取消支付')
      });
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.steps {
  padding-top: 40px;
  padding-bottom: 40px;
}

.price {
  color: orange;
  font-weight: bold;
  font-size: 20px;
  margin-right: 30px;
}
</style>
